<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑图书信息</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link href="ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="ele-2.15.7/index.js"></script>
    <style type="text/css">
        label {
            display: inline-block;
            width: 200px;
            text-align: right;
        }
    </style>
</head>
<body>
<div id="app">
    <label>编号</label><input v-model="book.id"><br>
    <label>书名</label><input v-model="book.bookname"><br>
    <label>出版社</label><input v-model="book.bookpress"><br>
    <label>出版日期</label><input v-model="book.pressdate"><br>
    <label>作者</label><input v-model="book.bookauthor"><br>
    <label>库存</label><input v-model="book.bookcount"><br>
    <label></label>
    <button @click="save">保存</button>
</div>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            book: {

            },
        },
        created: function(){
            //JS BOM 地址对象
            var id = location.hash.substring(1);
            axios({
                url:"GetBookServlet",
                params:{
                    id: id,
                }
            }).then(res=>{
                //axios 对象方法会自动的转json对象
                this.book = res.data
            })
        },
        methods: {
            save(){
                axios({
                    url:"SaveBookServlet",
                    params : this.book
                }).then(res=>{
                    alert(res.data);
                });
            }
        }
    });
</script>
</body>
</html>